<template>
  <div class="page page-with-subnavbar">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">选择下一环节</div>
        <div class="subnavbar personnel-choice-subnavbar">
          <div class="subnavbar-inner">
            <div class="segmented segmented-raised">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content  " style="background-color: #fff;padding-bottom: 44px">
      <div class="block  custom-accordion personneles-accordion">
        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span class="">组织1组织1组织1</span>
          </div>
          <div class="accordion-item-content" style="">
            <div class="list media-list personnel-choice-list">
              <ul>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10001" data-name="马克"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>马克</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">马克</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10002" data-name="库克"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>库克</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">库克</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10003" data-name="艾克"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>艾克</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">艾克</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>


        <div class="list media-list personnel-choice-list">
          <ul>
            <li>
              <label class="item-checkbox item-content">
                <input type="checkbox" name="demo-media-checkbox" value="10004" data-name="马克四四"
                       data-subname="中水联总经办/董事会">
                <i class="icon icon-checkbox"></i>
                <div class="item-media">
                  <p>马克四四</p>
                </div>
                <div class="item-inner">
                  <div class="item-title-row">
                    <div class="item-title">马克四四</div>
                  </div>
                  <div class="item-text">中水联总经办/董事会</div>
                </div>
              </label>
            </li>
          </ul>
        </div>


        <div class="accordion-item">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span>组织3组织3组织3</span>
          </div>
          <div class="accordion-item-content">
            <div class="list media-list personnel-choice-list">
              <ul>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10005" data-name="张三"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>张三</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">张三</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10006" data-name="李四"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>李四</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">李四</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10007" data-name="王五"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>王五</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">王五</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10008" data-name="赵六"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>赵六</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">赵六</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
                <li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="10009" data-name="叫什么呢"
                           data-subname="中水联总经办/董事会">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>叫什么呢</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">叫什么呢</div>
                      </div>
                      <div class="item-text">中水联总经办/董事会</div>
                    </div>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-scrollable personnel-choice-bar">
      <div class="toolbar-inner">
      </div>
      <div class="toolbar-right-button">
        <button class="col button button-fill">确认</button>
      </div>
    </div>
  </div>
</template>
<style>
  .personnel-choice-list .item-media > p {
    width: 44px;
    height: 44px;
    margin: 0;
    background-color: #e77272;
    color: #fff;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    overflow: hidden;
  }

  .personnel-choice-bar .toolbar-inner {
    width: 80%;
  }

  .personnel-choice-bar .toolbar-inner .tab-link {
    width: 40px;
    height: 40px;
    line-height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #e77272;
    color: #fff;
    margin-right: 6px;
  }

  .personnel-choice-bar .toolbar-right-button {
    width: 20%;
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
  }

  .personnel-choice-bar .toolbar-right-button > button {
    height: 44px;
    line-height: 44px;
    border-radius: 0;
    background-color: #db2d2d !important;
  }

  .custom-accordion .icon-minus {
    display: none;
  }

  .custom-accordion .accordion-item-opened > div > .icon-minus {
    display: inline-block;
  }

  .custom-accordion .accordion-item-opened > div > .icon-plus {
    display: none;
  }
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);
    },
    mounted() {
      console.log('componentMounted', this);
      console.log('页面初始化 根据id查询交办发起人人员信息');
      this.getNodeInfo();
//      this.serchSponsor();
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        id: this.$route.params.id,
        subnavbarTitle: [],
        personneles: []
      }
    },
    // Component Methods
    methods: {
      getNodeInfo: function () {
        app.preloader.show();
        setTimeout(function () {
          this.subnavbarTitle = [
            {name: "主要领导", id: '00001001'},
            {name: "分管领导", id: '00001002'},
            {name: "传阅", id: '00001003'},
            {name: "办公室", id: '00001004'},
            {name: "部门领导", id: '00001005'}
          ];
          this.updataSubnavbarView();

          $$('.personnel-choice-subnavbar .segmented a:first-child').trigger('click');
          app.preloader.hide();
        }.bind(this), 1000)
      },
      updataSubnavbarView: function () {
        var str = '';
        $$('.personnel-choice-subnavbar .segmented').html(str);
        for (var i = 0; i < this.subnavbarTitle.length; i++) {
          str += `<a class="button " data-id="${this.subnavbarTitle[i].id}" href="#">${this.subnavbarTitle[i].name}</a>
`
        }
        $$('.personnel-choice-subnavbar .segmented').html(str);
      },
      getOrganizationOrPeoplesByNodeId: function (e, nodeId) {
        console.log('点击的 nodeId 是', nodeId);
        app.preloader.show();
        app.request.get('./mockDate/personneles.json', {}, function (res) {
          this.updateContentView(JSON.parse(res).rows,$$('.personneles-accordion')[0]);
          app.preloader.hide();
        }.bind(this))
      },
      generateOrganizationStr: function (node) {
        return `
          <div class="accordion-item" data-id="${node.id}">
          <div class="accordion-item-toggle">
            <i class="icon icon-plus">+</i>
            <i class="icon icon-minus">-</i>
            <span class="">${node.name}</span>
          </div>
          <div class="accordion-item-content" style="">
          </div>
        </div>
        `;
      },
      generatePersonnelStr: function (node) {
        return `<li>
                  <label class="item-checkbox item-content">
                    <input type="checkbox" name="demo-media-checkbox" value="${node.id}" data-name="${node.name}"
                           data-subname="${node.description}">
                    <i class="icon icon-checkbox"></i>
                    <div class="item-media">
                      <p>${node.name}</p>
                    </div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title">${node.name}</div>
                      </div>
                      <div class="item-text">${node.description}</div>
                    </div>
                  </label>
                </li>`;
      },
      updateContentView: function (nodes,el) {
        var that = this;
        var $$personneles = $$(el);
        var isRefresh = true;
        if($$personneles.hasClass('accordion-item')){
          isRefresh = false;
        }
        console.log(el.className)
        console.dir(nodes);
        // 拿到节点信息 渲染视图
        var str = '';
        if(isRefresh){
          $$personneles.html(str);
        }
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].objectType === '1') {
            str += this.generateOrganizationStr(nodes[i]);
          } else if (nodes[i].objectType === '2') {
            if(i===0){
              str+=`<div class="list media-list personnel-choice-list">
              <ul>`
            }
            str += this.generatePersonnelStr(nodes[i]);
            if( nodes.length===1 || i===(nodes.length-1)){
              str += `</ul></div>`
            }
          }
        }
        if(isRefresh){
          $$personneles.html(str);
        }else{
          $$personneles.children('.accordion-item-content').html(str);
          app.accordion.open($$personneles)
        }

        // 执行一次检查 看节点下是否有组织 有则绑定查询事件
        console.log('将要检查的是')
        if(isRefresh){
          console.log($$personneles)
          setTimeout(function () {
            this.doCheckItems($$personneles);
          }.bind(this),0)
        }else{
          console.log($$personneles.children('.accordion-item-content'))
          setTimeout(function () {
            this.doCheckItems($$personneles.children('.accordion-item-content'));
          }.bind(this),0)
        }

      },
      doCheckItems: function ($$parent) {
        var $$children = $$parent.find('.accordion-item');
        console.log('拿到的参数',$$parent)
        console.log('找到的孩子',$$children)
        for (var i = 0; i < $$children.length; i++) {
            $$($$children[i]).once('click',function (el) {
              this.appendChildren(el)
            }.bind(this,$$children[i]))
        }
      },
      appendChildren:function (el) {
        app.preloader.show();
        var $$el = $$(el);
        var oid = $$el.attr('data-id');
        console.log('点击的组织id是',oid);

//        设置随机事件模拟获取的数据 人员 或者 组织
        var R = Math.random();
        var uurl = R>0.5 ? './mockDate/organization.json':'./mockDate/personneles.json';
        console.log(uurl)
        app.request.get(uurl, {}, function (res) {
          this.updateContentView(JSON.parse(res).rows,el);
          app.preloader.hide();
        }.bind(this))
      },
      updateSponsorTabView: function () {
        $$('.personnel-choice-bar .toolbar-inner').html('')
        var str = '';
        for (var i = 0; i < app.data.selectedPersonnel.length; i++) {
          str += `<a href="#" class="tab-link">${app.data.selectedPersonnel[i].name}</a>`
        }
        $$('.personnel-choice-bar .toolbar-inner').html(str)
      },
      subnavbarClick: function (e) {
        // subnavbar被点击
        //  1、样式更改
        //  2、依据节点id去查询人员数据
        //  3、更新视图
        //  4、清空选择人员数据 并更新视图
        $$(e.target).addClass('tab-link-active').siblings('.tab-link-active').removeClass('tab-link-active');
        this.getOrganizationOrPeoplesByNodeId(e, $$(e.target).attr('data-id'));

        app.data.selectedPersonnel = [];
        this.updateSponsorTabView();

      },
      accordionItemClick: function (e) {
        setTimeout(function () {
          var arr = [];
          var test = $$("input[name='demo-media-checkbox']:checked");
          for (var i = 0; i < test.length; i++) {
            arr.push({
              id: $$(test[i]).val(),
              name: $$(test[i]).attr('data-name'),
              subname: $$(test[i]).attr('data-subname'),
            })
          }
          app.data.selectedPersonnel = arr;
          console.dir(app.data.selectedPersonnel);
          this.updateSponsorTabView();
        }.bind(this), 0)
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page)
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
        $$('.personnel-choice-subnavbar').on('click', this.subnavbarClick);
        $$('.personneles-accordion').on('click', '.item-checkbox', this.accordionItemClick)
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page)
        $$('.personnel-choice-subnavbar').off('click', this.subnavbarClick)
        $$('.personneles-accordion').off('click', '.item-checkbox', this.accordionItemClick)

      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
